<template>
  <div class="product-details">
    <div class="top-line">
      <div class="top-box top-box1">
        <blue-block title="近10年粮食产量" :showBG="true"></blue-block>
      </div>
      <div class="top-box top-box2">
        <blue-block title="近10年粮食播种面积" :showBG="true"></blue-block>
      </div>
      <div class="top-box top-box3">
        <blue-block title="近一年菜价格浮动对比" :showBG="true"></blue-block>
      </div>
    </div>
    <div class="bottom-line">
      <blue-block title="2019年各区县粮食产量对比" :showBG="true"></blue-block>
    </div>
  </div>
</template>
<script>
import BlueBlock from '../../components/blue-block.vue'
export default {
  components:{
    BlueBlock
  },
  data(){
    return {

    }
  }
}
</script>
<style scoped lang="scss">
.product-details{
  width: 100%;
  height: 100%;
  padding: 6vh 2.86vw 4vh;
  .top-line{
    width: 100%;
    height: 45.5vh;
    display: flex;
    justify-content: space-between;
    margin-bottom: 5vh;
    .top-box{
      width: 33%;
      height: 100%;
    }
  }
  .bottom-line{
    width: 100%;
    height: 40.5vh;
  }
}
</style>
